<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件对象和事件委托</title>
</head>
<body>
    <ul id="box">
        <li>111</li>
        <li>222</li>
        <li>333</li>
        <li>444</li>
        <li>555</li>
        <li>666</li>
    </ul>
<script>
    // 事件委托-->
    // 事件流：捕获阶段 --> 目标阶段 --> 冒泡阶段
    let box = document.querySelector('#box')
    console.log(box.querySelectorAll('li'))
    let oLi = Array.prototype.slice.call(box.querySelectorAll('li'), 0)

    box.addEventListener('click', e => {
        console.log(oLi.indexOf(e.target))
        e.stopPropagation()
    })

    document.body.addEventListener('click', () => {
        console.log('body')
    }, true)

    // focus || onblur || scroll 没有冒泡
    // e.stopPropagation() 阻止事件冒泡和捕获
    // e.stopImmediatePropagation() 不仅可以阻止事件冒泡和捕获，还能阻止这一事件的其他监听函数
    // 阻止事件冒泡的兼容性方案：e.cancelBubble = true
</script>
</body>
</html>